<template>
  <component v-if="$attrs.id && visible" v-bind="$attrs"
    :is="tabName" class="d-view" @hide-view="hideView"/>
</template>

<script setup>
import LeadsDetail from '/src/views/crm/leads/Detail'
import CustomerDetail from '/src/views/crm/customer/Detail.vue'
import ContactsDetail from '/src/views/crm/contacts/Detail.vue'
import BusinessDetail from '/src/views/crm/business/Detail.vue'
import ContractDetail from '/src/views/crm/contract/Detail.vue'
import ProductDetail from '/src/views/crm/product/Detail'
import ReceivablesDetail from '../../receivables/Detail.vue'
import VisitDetail from '../../visit/Detail.vue'
import InvoiceDetail from '/src/views/crm/invoice/Detail'
import ReceivablesPlanDetail from '../../receivablesPlan/Detail.vue'

import {ref,computed,onMounted} from "vue"

defineOptions({
  name: 'CRMAllDetail', // 详情
})

const props = defineProps({
  crmType: String,
  visible: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['update:visible'])

// 组件名
const tabName = computed(() => {
  console.log("tabName", props)
  if (props.crmType == 'leads') {
    return LeadsDetail
  } else if (props.crmType == 'customer') {
    return CustomerDetail
  } else if (props.crmType == 'contacts') {
    return ContactsDetail
  } else if (props.crmType == 'business') {
    return BusinessDetail
  } else if (props.crmType == 'contract') {
    return ContractDetail
  } else if (props.crmType == 'product') {
    return ProductDetail
  } else if (props.crmType == 'receivables') {
    return ReceivablesDetail
  } else if (props.crmType == 'receivablesPlan') {
    return ReceivablesPlanDetail
  } else if (props.crmType == 'visit') {
    return VisitDetail
  } else if (props.crmType == 'invoice') {
    return InvoiceDetail
  } else {
    return ''
  }
})

function hideView() {
  emits('update:visible', false)
}

</script>


<style lang="scss" scoped>
.full-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.3);
}

.d-view {
  position: fixed;
  min-width: 926px;
  width: 75%;
  top: 0px;
  bottom: 0px;
  right: 0px;
}
</style>
